<template>
	<view>
		<image class="bgimage" src="https://pic.imgdb.cn/item/6194da4c2ab3f51d9160804a.jpg"></image>

		<view class="headline"></view>
		<view style="height: 20rpx;"></view>
		
		<view class="page-list">
			<view class="item-title">
				<view class="left">
					<view class="left-img"><image src="/static/images/head.png"></image></view>
					<view class="left-title">
						<view class="name"><text>管理员 ：</text><text>{{form.tName}}</text></view>
						<view class="site"><text>账 号 ：</text><text>{{form.tNum}}</text></view>
					</view>
				</view>
			</view>
			<view style="height: 1rpx;"></view>
			<view class="item" v-for="(item, index) in list" :key="index"    @click="onPage(item.name)">
			
				<view class="left">
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<svg t="1636270783215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6981" width="200" height="200"><path d="M283.648 174.081l57.225-59.008 399.479 396.929-399.476 396.924-57.228-59.004 335.872-337.92z" p-id="6982" fill="#b9b9b9" ></path></svg>
				
			</view>
			<view class="popup" v-show="show">
				<view><text>确定退出吗？</text></view>
				<view class="but2"></view>
				<view><button class="agree"  @tap="affirm">退出</button></view>
				<view><button class="cancel"  @tap="cancell">再看看</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onTabItemTap(e) {
		  console.log("123")
			console.log(e)
			location.reload()
		},
		data() {
			return {
				form: uni.getStorageSync("user"),
				show: false,
				list:[
					{
						img:'../../static/images/icon/icon01.png',
						name:'关于岭梦空间',
						url:"/pages/my/about",
						
					},
					{
						img:'../../static/images/icon/icon02.png',
						name:'退 出',
						url:"/"
					},
				],
			};
		},
		methods:{

			onPage(name){
				if(name=='退 出')
				this.show = true;
				else
				uni.navigateTo({
					url:"/pages/my/about"
				})
			},
			// 弹窗
			tapPopup(name) {
				
			},
			cancell() {
				this.show = false;
			},
			affirm() {
				this.show = false;
				uni.clearStorage();
				uni.navigateTo({
					url: "/pages/login/login",
				})
			},
			cancel() {
				uni.navigateTo({
					url: "/pages/mys/mys"
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.popup {
		height: 390rpx;
		background-color: #fcfcfc;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		text-align: center;
		left: 0;
		right: 0;
		position: fixed;
		bottom: 0rpx;
		z-index: 9999;
		text {
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			font-size: 36rpx;
			padding: 100rpx 0rpx 100rpx 0rpx;
		}
	
		.but2 {
			text-align: center;
			height: 120rpx;
			bottom: 20rpx;
			position: fixed;
		}
	
		.agree,
		.cancel {
			text-align: center;
			width: 280rpx;
			height: 86rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
		}
	
		.agree {
			background-color: #e0e0e0;
			position: fixed;
			left: 10%;
		}
	
		.cancel {
			color: #ffffff;
			background-color: #108ee9;
			position: fixed;
			right: 10%;
		}
		}
	// page{
	// 	background-color: #ffffff;
	// }

	.bgimage {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		opacity: 0.6;
		background-repeat: repeat-y;
		bottom: 0rpx;
		// padding: 119rpx 0rpx;
		// background-repeat: no-repeat;
		// position: absolute;
		// z-index: -1;
		// background-size: 100%;
		// width: 100%;
		// height: 100%;
		// opacity: 0.6;
	
	}
	.headline{
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius:20rpx;
		background-color: #007AFF;
	}
	.page-list{
		.item-title{
			margin: 25rpx;
			border-radius: 30rpx;
			padding: 15rpx 25rpx;
			border: #00c4ff solid 1rpx;
			background-color: #ffffff;
			display: flex;
			height: 220rpx;
			align-items: center;
			justify-content: space-between;
			.name text{
				color: #ebc053;
					font-size: 32rpx;
					font-weight: 600;
				}
			.site {
				margin-top: 20rpx;
				text{
					font-size: 28rpx;
						color: #787878;
					}
			}
			
			.left{
				display: flex;
				align-items: center;
				
				&-title{
					margin-left: 25rpx;
					height: 90rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
				&-img{
					image{
						width: 140rpx;
						height: 140rpx;
						border-radius: 60rpx;
					}
				}
				
				
			}
		}

		.item{
			margin: 25rpx;
			border-radius: 30rpx;
			padding: 15rpx 25rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
		}
		.item{
			border-radius: 30rpx;
			border: #00c4ff solid 1rpx;
			background-color: #ffffff;
			margin: 25rpx 25rpx;
			padding: 25rpx 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 25rpx;
				}
				text{
					font-size: 30rpx;
					color: #616161;
				}
				
			}
		}
	}
	.icon{
		width: 45rpx;
		height: 50rpx;
	}
</style>
